<!--
 @description  软体核心指标统计
 @fileName CoreData.vue
 @author maliang
 @created 2021/12/06 11:23:00
-->
<template>
  <div>
    <div class="core-list">
      <div
        v-for="(item, index) in coreList"
        :key="index"
        class="core-item"
      >
        <div class="core-item-title">
          <img class="item-icon" :src="item.icon" alt="">
          <span>{{ item.title }}({{ item.unit }})</span>
        </div>
        <div class="today" @click="showDialogHandle(item.title)">
          <span>今日</span>
          <span>{{
            item.data.todayCompletedQuantity | filterForamtThousand
          }}</span>
        </div>
        <div
          class="yestoday-month"
          @click="showDialogHandle(item.title)"
        >
          <span>昨日<i>{{
            item.data.yesterdayCompletedQuantity
              | filterForamtThousand
          }}</i></span>
          <span>本月<i>{{
            item.data.monthCompletedQuantity
              | filterForamtThousand
          }}</i></span>
        </div>
      </div>
    </div>
    <div class="core-update-time">统计截止时间: {{ showDate }}</div>
    <van-popup
      v-model="showDialog"
      round
      closeable
      class="custom-van-pop"
      style="width:77%"
    >
      <software-dialog
        v-if="showDialog"
        :type-name="typeName"
        :core-date="coreDate"
      />
    </van-popup>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getSoftwareQuantity } from '@/apis/software'
import SoftwareDialog from './SoftwareDialog'
import showDateMixin from '@/mixins/showCoreTime'
export default {
  name: 'SoftwareCoreData',
  components: { SoftwareDialog },
  mixins: [showDateMixin],
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}.{m}.{d}')
    }
  },
  data() {
    return {
      showDialog: false,
      typeName: '',
      coreList: [
        {
          title: '沙发',
          unit: '套',
          icon: require('../../../assets/image/icon_soft_01.png'),
          data: {
            monthCompletedQuantity: '-',
            todayCompletedQuantity: '-',
            yesterdayCompletedQuantity: '-'
          }
        },
        {
          title: '床垫',
          unit: '张',
          icon: require('../../../assets/image/icon_soft_02.png'),
          data: {
            monthCompletedQuantity: '-',
            todayCompletedQuantity: '-',
            yesterdayCompletedQuantity: '-'
          }
        },
        {
          title: '软床',
          unit: '套',
          icon: require('../../../assets/image/icon_soft_03.png'),
          data: {
            monthCompletedQuantity: '-',
            todayCompletedQuantity: '-',
            yesterdayCompletedQuantity: '-'
          }
        },
        {
          title: '小件',
          unit: '件',
          icon: require('../../../assets/image/icon_soft_04.png'),
          data: {
            monthCompletedQuantity: '-',
            todayCompletedQuantity: '-',
            yesterdayCompletedQuantity: '-'
          }
        }
      ]
    }
  },
  watch: {
    coreDate: {
      handler() {
        this.getCenterTargetData()
      },
      immediate: true
    }
  },
  methods: {
    showDialogHandle(name) {
      this.typeName = name
      this.showDialog = true
    },
    async getCenterTargetData() {
      // 核心指标
      const findSoftwareQuantity = getSoftwareQuantity(this.coreDate)
      try {
        const [softwareQuantityRes] = await Promise.all([
          findSoftwareQuantity
        ])
        if (
          softwareQuantityRes.data &&
                    softwareQuantityRes.data.length
        ) {
          softwareQuantityRes.data.forEach((item) => {
            this.dateSetHandle(item)
          })
        }
      } catch (error) {
        this.$toast.fail('系统异常')
      }
    },
    dateSetHandle(item) {
      switch (item.type) {
        // 沙发
        case '沙发':
          this.coreList[0].data = item
          break
          // 床垫
        case '床垫':
          this.coreList[1].data = item
          break
          // 软床
        case '软床':
          this.coreList[2].data = item
          break
          // 小件
        case '小件':
          this.coreList[3].data = item
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.core-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    &::after {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        width: 100%;
        height: 2px;
        background-color: #f5f6f7;
        transform: scaleY(0.5);
    }
    .core-item {
        position: relative;
        width: 50%;
        // height: 84px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 14px 0;
        box-sizing: border-box;
        .core-item-title {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #888888;
            line-height: 16px;
            letter-spacing: 1px;
            margin-bottom: 10px;
            .item-icon {
                width: 18px;
                margin-right: 5px;
            }
        }
        .today {
            display: flex;
            align-items: center;
            margin-bottom: 14px;
            & > span {
                color: inherit;
                &:nth-child(1) {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #888888;
                    line-height: 16px;
                    letter-spacing: 1px;
                    margin-right: 5px;
                }
                &:nth-child(2) {
                    font-size: 20px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: inherit;
                    line-height: 24px;
                    letter-spacing: 1px;
                }
            }
        }
        .yestoday-month {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 16px;
            > span {
                color: #888888;
                &:nth-child(1) {
                    margin-right: 5px;
                }
                > i {
                    color: inherit;
                    font-style: normal;
                }
            }
        }
        &::after {
            position: absolute;
            left: 0;
            bottom: 0;
            content: "";
            width: 100%;
            height: 2px;
            background-color: #f5f6f7;
            transform: scaleY(0.5);
        }
        &:nth-child(even) {
            > .core-item-title > .svg-icon,
            .today,
            .yestoday-month > span > i {
                color: #12adb9;
            }
            &::before {
                position: absolute;
                left: -1px;
                top: 50%;
                content: "";
                width: 2px;
                height: 54px;
                background-color: #f5f6f7;
                transform: scaleX(0.5);
                margin-top: -27px;
            }
        }
        &:nth-child(odd) {
            > .core-item-title > .svg-icon,
            .today,
            .yestoday-month > span > i {
                color: #fdbd43;
            }
        }
    }
}
.core-update-time {
    line-height: 18px;
    text-align: center;
    color: #999999;
    letter-spacing: 1px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
/deep/ .van-action-sheet__name {
    color: #333333;
    font-size: 16px;
}
</style>
